<div id="finicialDocTypeConfig" class="clearfix">
	<div class="absolute fin_menu border">
		<div class="color-gray line-height-45" style="background:rgba(239,239,239,1);">账套名称</div>
		<div class="absolute" style="top: 45px;bottom: 0px;width: 100%;">
			<vue-scroll :ops="ops" style="height: 100%;">
				<ul>
					<li class="line-height-45 border-b cursor relative" @click="selectAccounting(item)" :class="{active: accountingSelectId == item.id}" v-for="(item, index) in accountingArr">
						{{ item.name }}
					</li>
				</ul>
			</vue-scroll>
		</div>
	</div>

	<div class="fin_add pull-right mt-10 border">
		<div class="color-gray line-height-45 pl-12 clearfix" style="background:rgba(239,239,239,1);">
			<span>凭证类型</span>
			<div class="line-height-45 pull-right mr-10 cursor" @click="add" style="color:#666">
				<span class="icon-Org-account color-primary"></span>
				新增凭证
			</div>
		</div>
		<div class="border mt-10 mlr-10 mb-10 line-height-40 text-center global_table">
			<div class="dy-flex color-666 font-nm color-gray global_table_title">
				<div class="dy-fx-2">凭证类型</div>
				<div class="dy-fx-3 border-l border-r">备注</div>
				<div class="dy-fx-1 border-r">状态</div>
				<div class="dy-fx-1">操作</div>
			</div>
			<div class="dy-flex border-t" v-for="(item, index) in voucherTypeArr">
				<div class="dy-fx-2 relative">
					<span v-if="!item.nameFlag">{{ item.name }}</span>
					<input type="text" class="form-control inline mr-5 text-center" style="width: 110px;" v-model="item.name" v-if="item.nameFlag" >
					<span class="mr-5 icon-Gm-confirm" v-if="item.nameFlag" @click="saveAddType(item, index)"></span>
					<span class="icon-Gm-cancel" v-if="item.nameFlag" @click="cancel(item, index)"></span>
					<span class="pull-right icon-Gm-edit line-height-40 absolute" style="right: 5px; top: 0;" v-if="!item.nameFlag" @click="editDisplay(index, 'name')"></span>
				</div>
				<div class="dy-fx-3 border-l border-r relative">
					<span v-if="!item.memoFlag">{{ item.memo || '--' }}</span>
					<input type="text" class="form-control inline mr-5" style="width: 140px;" v-model="item.memo" v-if="item.memoFlag" >
					<span class="mr-5 icon-Gm-confirm" v-if="item.memoFlag" @click="saveAddMemo(item, index)"></span>
					<span class="icon-Gm-cancel" v-if="item.memoFlag" @click="cancel(item, index)"></span>
					<span class="pull-right icon-Gm-edit line-height-40 absolute" style="right: 5px; top: 0;" v-if="!item.memoFlag" @click="editDisplay(index, 'memo')"></span>
				</div>
				<div class="dy-fx-1 border-r">
					{{ item.status == 'Y' ? '启用' : '停用' }}
				</div>
				<div class="dy-fx-1">
					<a class="mr-5" v-if="item.id" @click="statusSwitch(item)">{{ item.status == 'Y' ? '停用' : '启用' }}</a>
					<a @click="del(item)">删除</a>
				</div>
			</div>
		</div>
	</div>

</div>

<style type="text/css">
	.fin_menu {
		width: 230px;
		left: 0;
		top: 66px;
		bottom: 0;
		border-left: 0;
		text-indent: 15px;
		border-top-right-radius: 4px;
	}
	.fin_menu li:hover span {
		display: block;
	}
	.fin_menu li:hover {
		background:rgba(247,247,247,1);
	}
	.fin_menu li.active {
		background-color: #5e67a5;
		color:#fff;
	}
	.fin_add {
		width: 785px;
		border-top-left-radius: 4px;
	}
</style>

<script src="modules/system_config/scripts/finicial_doc_type_config.js" charset="utf-8"></script>
